<template>
	<div class="cashDetail">
		<div class="new-header">
			<img src="../../../static/images/agent-back-icon.png" alt="" class="left" @click="toBack">
			<div class="center">优惠概况</div>
			<div class="right" @click="switchMonthType()">{{typeShow}}</div>
		</div>
		<div class="cashDetail-content-box">
			<div class="cashDetail-content" v-for="(item,index) in discountData" @click="switchTitleShow(index)">
				<div class="collapse-content-list-title">
					<div class="collapse-content-list-title-left">{{item.countDay}}</div>
					<div class="">
						<img src="../../../static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
						     class="collapse-content-list-title-right">
						<img src="../../../static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
						     class="collapse-content-list-title-right collapse-content-list-title-right2">
					</div>
				</div>
				<div class="cashDetail-content" v-if="showDataSwitch[index]===1">
					<div class="collapse-content-list-table-list">
						<div class="">
							<div class="line1">红利</div>
							<div class="line2">{{item.bonusMoney}}</div>
						</div>
						<div class="gray-line"></div>
						<div class="">
							<div class="line1">返水</div>
							<div class="line2">{{item.rebates}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="load-more" v-if="hasMore && discountData.length > 0" @click="loadMore">
				<span>点击加载更多</span>
				<img src="../../../static/images/agent-lowerLevel-loadMore.png" alt="" class="load-more-icon">
			</div>
			<div class="load-more" v-if="!hasMore && discountData.length > 0">
				<span>已加载全部</span>
			</div>
			<div class="no-data-box" v-if="discountData.length === 0">
				<img src="../../../static/images/agent-reports-noData.png" alt="" class="no-data-img">
				<div class="no-data-fonts">暂无数据</div>
			</div>
		</div>
	</div>
	
</template>

<script>
import HeaderTop from '../../components/top/top';
import {Toast} from "vant";

export default {
	name: "discountDetail",
	components: {
		HeaderTop,
	},
	data() {
		return {
			discountData:[],
			showDataSwitch: [],
			type:'',
			typeShow:'',
			pageNumber:1,
			hasMore:true,
		}
	},
	beforeRouteLeave (to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		sessionStorage.removeItem('cashMonthType')
		this.$destroy(true)
		next()
	},
	mounted() {
		this.loadTop();
	},
	created() {
	
	},
	methods: {
		toBack(){
			sessionStorage.removeItem('cashMonthType')
			this.$router.push('/')
		},
		loadTop() {
			const showType = sessionStorage.getItem('cashMonthType')
			if(showType === '1'){
				this.type = 'month'
				this.typeShow = '本月'
			}else if(showType === '2'){
				this.type = 'lastmonth'
				this.typeShow = '上月'
			}
			this.getdiscountDetail()
		},
		switchMonthType(){
			if(this.type === 'month'){
				this.type = 'lastmonth'
				this.typeShow = '上月'
				sessionStorage.setItem('cashMonthType','2')
			}else if(this.type === 'lastmonth'){
				this.type = 'month'
				this.typeShow = '本月'
				sessionStorage.setItem('cashMonthType','1')
			}
			this.pageNumber1 = 1
			this.discountData = []
			this.getdiscountDetail()
			Toast.success('已切换到' + this.typeShow);
		},
		getdiscountDetail(){
			let params = {
				type:this.type,
				pageNumber:1,
				pageSize:30
			}
			this.ServerAPI.postAPI(this.API.promoDeatil,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						if(data.data.length === 30){
							this.hasMore = true
						}else if(data.data.length < 30){
							this.hasMore = false
						}
						this.discountData = this.discountData.concat(data.data)
						this.handleDataSwitch();
					}
				}
			})
		},
		loadMore(){
			this.pageNumber++
			this.getdiscountDetail()
		},
		handleDataSwitch() {
			this.discountData.forEach((item, index) => {
				this.showDataSwitch[index] = 1
			})
		},
		switchTitleShow(value) {
			this.showDataSwitch[value] = this.showDataSwitch[value] === 1 ? 0 : 1
			this.$forceUpdate()
		},
	}
}
</script>

<style lang="scss" scoped>
.cashDetail {
	.new-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1rem;
		padding: 0 .32rem;
		color: #2A2929;
		font-size: .36rem;
		font-weight: bold;
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,.3);
		.left {
			height: .32rem;
		}
		.center {
			width: 50%;
			margin-left: 10%;
			text-align: center;
		}
		.right {
			background: #0072E5;
			padding: .1rem .25rem;
			border-radius: .3rem;
			color: #FFFFFF;
			font-size: .3rem;
			font-weight: normal;
		}
	}
	.cashDetail-content-box {
		margin: .3rem auto;
		
		.cashDetail-content {
			.collapse-content-list-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: rgb(229, 229, 229);
				height: .8rem;
				padding: 0 .2rem;
				color: rgb(65, 65, 65);
				margin-top: .1rem;
				
				.collapse-content-list-title-left {
				
				}
				
				.collapse-content-list-title-right {
					height: .25rem;
				}
				
				.collapse-content-list-title-right2 {
					transform: rotate(180deg);
				}
				
				div {
					display: flex;
					align-items: center;
					
					.right-fonts {
						margin-right: .15rem;
					}
					
					.collapse-content-list-title-right {
						height: .25rem;
					}
					
					.collapse-content-list-title-right2 {
						transform: rotate(180deg);
					}
				}
				
			}
			
			.cashDetail-content {
				
				.collapse-content-list-table-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					border-bottom: rgb(229, 229, 229) 1px solid;
					padding: .15rem 0;
					
					div {
						width: 50%;
						
						.line1 {
							width: 100%;
							color: rgb(102, 102, 102);
						}
						
						.line2 {
							margin-top: .1rem;
							width: 100%;
							color: rgb(52, 52, 52);
						}
					}
					
					.gray-line {
						height: .5rem;
						width: 1px;
						background: rgb(229, 229, 229);
					}
				}
				
			}
		}
		.load-more {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #9C9C9C;
			margin: .15rem 0 .2rem;
			.load-more-icon {
				height: .15rem;
				margin-left: .15rem;
			}
		}
		.no-data-box {
			text-align: center;
			margin-top: 1rem;
			.no-data-img {
				width: 3rem;
			}
			.no-data-fonts{
				color: rgb(176,182,190);
				font-size: .4rem;
				margin-top: .2rem;
			}
		}
	}
}
</style>
